<template>
    <div class="qm-radio noselect" :class="{ 'active': value }" @click="handleClick">
        <f7-icon class="icon" f7="checkmark_alt"></f7-icon>
    </div>
</template>

<script>
export default {
    name: "qm-radio",
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    model: {
        prop: "value",
        event: "change"
    },
    methods: {
        handleClick() {
            this.$emit("change", !this.value);
        }
    }
}
</script>

<style lang="less" scoped>
.qm-radio {
    --size: calc(44px * var(--ratio));
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
    border: 1px solid #E3E5E9;
    color: transparent;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: default;

    .icon {
        font-size: 17px;
    }


    &.active {
        border-color: var(--color-brand);
        background-color: var(--color-fill-primary);
        color: #fff;
    }
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>